<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <t-card shadow="never" style="width: 1320px">
        <el-form :inline="true" :model="ownerQO" ref="ownerQO">
          <el-form-item label="姓名" prop="ownerName" label-width="50px">
            <el-input v-model="ownerQO.ownerName" filterable clearable placeholder="请输入姓名"
                      style="width:120px;"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="ownerGender" label-width="50px">
            <el-select v-model="ownerQO.ownerGender" filterable clearable placeholder="请选择性别"
                       style="width: 120px;">
              <el-option v-for="g in genders" :key="g.value" :label="g.label" :value="g.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业主状态" prop="ownerStatus" label-width="70px">
            <el-select v-model="ownerQO.ownerStatus" filterable clearable placeholder="请选择状态"
                       style="width: 120px;">
              <el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="ownerPhone" label-width="60px">
            <el-input v-model="ownerQO.ownerPhone" filterable clearable placeholder="请输入手机号"
                      style="width:130px;"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="ownerIdcard" label-width="60px">
            <el-input v-model="ownerQO.ownerIdcard" filterable clearable placeholder="请输入身份证"
                      style="width:170px;"></el-input>
          </el-form-item>
          <t-button theme="primary" variant="dashed" size="large" @click="select(1)">查询</t-button>
          &nbsp;
          <t-button theme="primary" variant="outline" size="large"
                    @click="resetForm('ownerQO')">重置
          </t-button>
          &nbsp;
          <t-button theme="primary" size="large" @click="dialogAdd=true">添加</t-button>
        </el-form>
      </t-card>
      <br/>

      <t-card shadow="never" style="width: 1320px">
        <el-table :data="currentOwners" border style="height:425px;">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="ownerName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="ownerGender" label="性别" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.ownerGender == 0">女</span>
              <span v-if="scope.row.ownerGender == 1">男</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerPhone" label="手机号" align="center"></el-table-column>
          <el-table-column prop="ownerIdcard" label="身份证" align="center"></el-table-column>
          <el-table-column prop="ownerStatus" label="业主状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.ownerStatus == 0">未入住</span>
              <span v-if="scope.row.ownerStatus == 1">已入住</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-row>
                <t-button theme="primary" variant="dashed" circle plain
                          @click="edit(scope)">编辑
                </t-button>
                <t-button theme="primary" variant="outline" circle plain
                          @click="show(scope)">查看
                </t-button>
                <t-button theme="primary" circle plain
                          @click="del(scope)">删除
                </t-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
                       :page-count="totalPage" @current-change="goPage">
        </el-pagination>
      </t-card>

      <el-dialog title="添加业主信息" :visible.sync="dialogAdd">
        <el-form :model="addOwner" ref="addOwner">
          <el-form-item label="姓名" prop="ownerName" label-width="80px">
            <el-input v-model="addOwner.ownerName" filterable clearable placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="ownerPhone" label-width="80px">
            <el-input v-model="addOwner.ownerPhone" filterable clearable
                      placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="ownerGender" label-width="80px">
            <el-select v-model="addOwner.ownerGender" filterable clearable placeholder="请选择性别">
              <el-option v-for="g in genders" :key="g.value" :label="g.label" :value="g.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证" prop="ownerIdcard" label-width="80px">
            <el-input v-model="addOwner.ownerIdcard" filterable clearable
                      placeholder="请输入身份证"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="ownerStatus" label-width="80px">
            <el-select v-model="addOwner.ownerStatus" disabled filterable clearable placeholder="未入住">
              <!-- 								<el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
              </el-option> -->
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="dialogAdd=false,resetForm('addOwner')">取 消</t-button>
          &ensp;
          <t-button theme="primary" @click="add">确 定</t-button>
        </div>
      </el-dialog>

      <el-dialog title="更新业主信息" :visible.sync="dialogUpdate">
        <el-form :model="updateOwner" ref="updateOwner">
          <el-form-item label="姓名" prop="ownerName" label-width="80px">
            <el-input v-model="updateOwner.ownerName" filterable clearable
                      placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="ownerPhone" label-width="80px">
            <el-input v-model="updateOwner.ownerPhone" filterable clearable
                      placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="ownerGender" label-width="80px">
            <el-select v-model="updateOwner.ownerGender" filterable clearable placeholder="请选择性别">
              <el-option v-for="g in genders" :key="g.value" :label="g.label" :value="g.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证" prop="ownerIdcard" label-width="80px">
            <el-input v-model="updateOwner.ownerIdcard" filterable clearable
                      placeholder="请输入身份证"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="dialogUpdate=false">取 消</t-button>
          &ensp;
          <t-button theme="primary" @click="update">确 定</t-button>
        </div>
      </el-dialog>

      <el-dialog title="房屋信息" :visible.sync="dialogBind" width="60%">
        <el-card class="box-card" shadow="never" style="height: 78px; width: 100%;">
          <el-form :model="ownerHouse" ref="ownerHouse">
            <el-row>
              <el-col :span="4" :offset="0">
                <el-form-item label="房屋" prop="houseId" label-width="140px">
                  <el-select v-model="ownerHouse.houseId" filterable clearable placeholder="请选择"
                             style="width: 140px;">
                    <el-option v-for="h in allHouses" :key="h.houseId"
                               :label="h.building.buildingName+h.building.buildingUnit+h.houseNo"
                               :value="h.houseId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="10">
                <t-button theme="primary" variant="outline" plain
                          @click="resetForm('ownerHouse')">重置
                </t-button>&nbsp;&nbsp;&nbsp;&nbsp;
                <t-button theme="primary" plain @click="bind(ownerHouse.houseId)">绑定</t-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card class="box-card" shadow="never" style="height: 285px; width: 700px;">
          <el-table :data="ownerHouses" border>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="houseNo" label="房号" align="center"></el-table-column>
            <el-table-column prop="houseArea" label="面积" align="center"></el-table-column>
            <el-table-column prop="houseRemark" label="备注" align="center"></el-table-column>
            <el-table-column prop="building.buildingName,building.buildingUnit" label="楼栋单元" align="center">
              <template slot-scope="scope">
                {{ scope.row.building.buildingName }}{{ scope.row.building.buildingUnit }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-row>
                  <t-button theme="primary" circle plain
                             @click="delOwnerHouse(scope)">删除</t-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-dialog>
    </t-card>
  </div>
</template>

<script>
import axios from "axios"
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "owners",
  data() {
    return {
      ownerQO: {},
      allBuildings: [],
      allHouses: [],
      ownerHouses: [],
      allOwners: [],
      currentOwners: [],

      dialogAdd: false,
      dialogUpdate: false,
      dialogBind: false,
      addOwner: {},
      updateOwner: {},
      ownerHouse: {},

      status: [{
        value: '0',
        label: '未入住'
      }, {
        value: '1',
        label: '已入住'
      }],
      genders: [{
        value: '1',
        label: '男'
      }, {
        value: '0',
        label: '女'
      }],
      totalPage: 0,
      currentPage: 0,
    }
  },
  methods: {
    delOwnerHouse(scope) {
      this.$confirm('此操作将解除绑定, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get("api/admin/owner/delOwnerHouse", {
          params: {
            houseId: scope.row.houseId,
            ownerId: this.ownerHouse.ownerId
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.ownerHouses.splice(scope.$index, 1);
            this.getOwnerHouses();
            this.goPage(this.currentPage);
            this.getAll();
            MessagePlugin.success('解绑成功')
          }
        })
      }).catch(() => {
        MessagePlugin.info('已取消')
      });
    },
    del(scope) {
      this.$confirm('此操作将永久删除业主信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get("api/admin/owner/del", {
          params: {
            id: scope.row.ownerId
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.currentOwners.splice(scope.$index, 1);
            this.allOwners.splice(scope.$index, 1);
            this.goPage(this.currentPage);
            this.getAll();
            MessagePlugin.success('删除成功')
          } else if (res.data.code == 201) {
            MessagePlugin.warning('业主已入住，不能删除')
          }
        })
      }).catch(() => {
        MessagePlugin.info('已取消')
      });
    },
    show(scope) {
      this.dialogBind = true;
      //数据回显
      this.ownerHouse = {
        ...scope.row
      };
      axios.get("api/admin/house/getAllByStatus").then(res => {
        if (res.data.code == 200) {
          this.allHouses = res.data.data;
        }
      });
      this.getOwnerHouses();
    },
    bind(houseId) {
      axios.get("api/admin/owner/addOwnerHouse", {
        params: {
          houseId: houseId,
          ownerId: this.ownerHouse.ownerId
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.getOwnerHouses();
          this.goPage(this.currentPage);
          this.getAll();
          MessagePlugin.success('绑定成功')
        }
        this.resetForm('ownerHouse');
      })
    },
    getOwnerHouses() {
      axios.get("api/admin/house/getOwnerHouses", {
        params: {
          id: this.ownerHouse.ownerId
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.ownerHouses = res.data.data;
        }
      })
    },
    edit(scope) {
      this.dialogUpdate = true;
      //数据回显
      this.updateOwner = {
        ...scope.row
      }
    },
    update() {
      if (this.updateOwner.ownerId) {
        axios.post("api/admin/owner/update", this.updateOwner)
            .then(res => {
              if (res.data.code == 200) {
                this.dialogUpdate = false;
                this.goPage(this.currentPage);
                this.getAll();
                MessagePlugin.success('更新成功')
              }
            })
      }
    },
    add() {
      axios.post("api/admin/owner/add", this.addOwner)
          .then(res => {
            if (res.data.code == 200) {
              this.dialogAdd = false;
              this.goPage(this.currentPage);
              this.getAll();
              MessagePlugin.success('添加成功')
            }
            this.resetForm('addOwner');
          });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    select(p) {
      axios.get("api/admin/owner/list/" + p, {
        params: this.ownerQO
      }).then(res => {
        if (res.data.code == 200) {
          this.currentOwners = res.data.data.list;
          this.totalPage = res.data.data.pages;
          this.currentPage = 1;
          MessagePlugin.success('查询成功')
        }
      })
    },
    goPage(p) {
      axios.get("api/admin/owner/list/" + p, {
        params: this.ownerQO
      }).then(res => {
        if (res.data.code == 200) {
          this.currentOwners = res.data.data.list;
          this.totalPage = res.data.data.pages;
        }
      })
    },
    getAll() {
      axios.get("api/admin/owner/getAll").then(res => {
        if (res.data.code == 200) {
          this.allOwners = res.data.data;
        }
      })
    },
  },
  mounted() {
    this.getAll();
    this.goPage(1);
  }
}
</script>

<style>

</style>